<template>
  <div class="main">
    <el-form :model="from" label-position="top" :rules="rules" ref="fromRef">
      <div class="back_img"></div>
      <div class="login">
        <div class="login_title">用户注册</div>
        <div class="login_input">
          <el-form-item prop="userName">
            <el-input
              :prefix-icon="Avatar"
              placeholder="真实姓名"
              v-model="from.realName"
            ></el-input>
          </el-form-item>
        </div>
        <div class="login_input">
          <el-form-item prop="密码">
            <el-input
              :prefix-icon="Briefcase"
              placeholder="密码"
              show-password
              v-model="from.password"
            ></el-input>
          </el-form-item>
        </div>
        <div class="login_input">
          <el-form-item prop="手机号">
            <el-input
              :prefix-icon="PhoneFilled"
              placeholder="手机号"
              v-model="from.telephone"
            ></el-input>
          </el-form-item>
        </div>
        <div class="login_input">
          <el-form-item prop="身份证号">
            <el-input
              :prefix-icon="HelpFilled"
              placeholder="身份证号"
              
              v-model="from.userName"
            ></el-input>
          </el-form-item>
        </div>
        <div class="login_button">
          <p @click="add">注册</p>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { Avatar, Briefcase,PhoneFilled,HelpFilled } from "@element-plus/icons-vue";
import { get } from "../../utils/request";
import { ElMessage } from "element-plus";
export default {
  name: "LoginComponent",

  data() {
    return {
      loginState: sessionStorage.login,
      from: [],
    };
  },
  setup() {
    return { Avatar, Briefcase,PhoneFilled,HelpFilled };
  },

  mounted() {},

  methods: {
    add() {
         get("/registerUser", {
        userName: this.from.userName,
        realName: this.from.realName,
        telephone: this.from.telephone,
        password: this.from.password,
        userRole:'user'
      }).then((res) => {
        console.log(res.data);
        if(res.data.code==0){
            ElMessage({
              message: "注册成功！",
              type: "success",
            }), this.$router.push({
            name: "login",
          })
        }else{
             ElMessage.error("用户名重复，请核对！")
             , this.$router.push({
            name: "register",
          })
        }
      });
    },
    },
};
</script>

<style lang="scss" scoped>
.login {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #259b9e;
  opacity: 0.9;
  /* background: #65768557; */
  padding: 30px;
  width: 18%;
  border: 1px solid #eee;
  border-radius: 20px;
}

.login_title {
  text-align: center;
  padding-bottom: 20px;
  font-size: 20px;
}
.login_input {
  margin-top: 15px;
}
.login_input:nth-child(2) {
  margin-bottom: 20px;
}
.login_input:nth-child(3) {
  margin-top: 20px;
}
.login_button {
  margin-top: 20px;
  display: flex;
}
.login_button p {
  color: #fff;
  font-size: 15px;
  display: block;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  width: 100%;
  border: 1px solid #ddd;
}
.login_button p:nth-child(1) {
  background: #409eff;
  margin-right: 10px;
}
.login_button p:nth-child(2) {
  background: #67c23a;
  margin-left: 10px;
}
</style>
